import 'package:flutter/material.dart';

class FlexLayout extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _FlexLayoutState();
}

class _FlexLayoutState extends State<FlexLayout> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          Text(
            'Flex弹性布局',
            style: TextStyle(
              fontSize: 30.0,
            ),
          ),
          Text(
            'Expanded中的flex:控制布局比例\nSpacer:占据空位',
            style: Theme.of(context).textTheme.title,
          ),

          //Flex的两个子widget按1：2来占据水平空间
          Flex(
            direction: Axis.horizontal,
            children: <Widget>[
              Expanded(
                flex: 1,
                child: Container(
                  height: 30.0,
                  color: Colors.red,
                ),
              ),
              Expanded(
                flex: 2,
                child: Container(
                  height: 30.0,
                  color: Colors.green,
                ),
              ),
            ],
          ),
          Text('水平方向1:2'),
          Padding(
            padding: const EdgeInsets.only(top: 20.0),
            child: SizedBox(
              height: 100.0,
              //Flex的三个子widget，在垂直方向按2：1：1来占用100像素的空间
              child: Flex(
                direction: Axis.vertical,
                children: <Widget>[
                  Expanded(
                    flex: 2,
                    child: Container(
                      height: 30.0,
                      color: Colors.red,
                    ),
                  ),
                  Spacer(
                    flex: 1,
                  ),
                  Expanded(
                    flex: 1,
                    child: Container(
                      height: 30.0,
                      color: Colors.green,
                    ),
                  ),
                ],
              ),
            ),
          ),
          Text('垂直方向:2：1:1'),
        ],
      ),
    );
  }
}
